<template>
  <view class="bg-white">
    <nav-bar title="打印" color="white" bg-color="black" show-back></nav-bar>
    <view class="content">
      <view class="p-10rpx text-base text-gray-500 flex">
        <text class="text-balance">模板设置</text>
        <view class="absolute right-10rpx">
          <u-icon
            @click="() => refSettingPopup.open()"
            name="setting-fill"
            label="打印区域设置"
            color="#1684fc"
            label-color="#1684fc"
            size="15rpx"
          ></u-icon>
        </view>
      </view>
      <view class="list-group" v-for="(group, gindex) in listData" :key="gindex">
        <view class="list-items" v-for="(item, index) in group" :key="index" @click="tapItem(item)">
          <view class="items-body" :class="[group.length == index + 1 ? '' : 'border-b']">
            <view class="">
              <text class="font-bold" :style="{ color: item.color || '' }">{{ item.txt }}</text>
            </view>
            <view class="ml-20rpx">
              <text class="text-base text-gray-500" :style="{ color: item.color || '' }">{{ item.subTitle }}</text>
            </view>
            <view class="list-arrow-right" style="display: flex; flex: auto">
              <text
                style="
                  flex: auto;
                  font-size: 16px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  text-align: right;
                  color: gray;
                "
                >{{ item.rightValue || "" }}</text
              >
              <u-icon :name="item.rightIcon ? item.rightIcon : 'arrow-right'" :color="item.color"></u-icon>
              <!-- <text class="icons icon-arrow-right"></text> -->
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 打票 设置 - 弹窗 -->
    <common-popup ref="refSettingPopup" @confirm="popupSettingConfirm">
      <template #content>
        <view class="flex-auto">
          <u-alert
            type="success"
            title="打印区域"
            description="打印区域影响打印设备设置的所属区域类型，如：一台打印设备开启了【前台】和【后厨】开关，并且打印区域设置中设置了开启全局的 【前台打票】和【后台打票】，此时该设备会进行两次打印。"
          ></u-alert>
          <view class="radio-list-item">
            <text> 前台打票 </text>
            <view>
              <u-radio-group v-model="formData.frontDeskPrinting">
                <u-radio v-for="(item, index) in dataOf" :key="index" :label="item.label" :name="item.value"></u-radio>
              </u-radio-group>
            </view>
          </view>
          <view class="radio-list-item">
            <text> 后厨打票 </text>
            <view>
              <u-radio-group v-model="formData.rearKitchenPrinting">
                <u-radio v-for="(item, index) in dataOf" :key="index" :label="item.label" :name="item.value"></u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>
      </template>
    </common-popup>
  </view>
</template>
<script setup>
import { onMounted, ref, reactive, computed } from "vue";
import { useStore } from "vuex";

const listData = reactive([
  [
    {
      path: "./print-config/cashier-receipt",
      txt: "收银小票",
      subTitle: "收银台给客户的小票，根据实际定容设置小票打印模板",
    },
    {
      path: "./print-config/kitchen-receipt",
      txt: "后厨小票",
      subTitle: "通知后厨做菜的小票，根据实际定容设置小票打印模板",
    },
  ],
]);

/** 列表项点击 */
const tapItem = (item) => {
  if (item.func) {
    item.func(item);
  } else {
    uni.navigateTo({ url: item.path });
  }
};

/** -------  设置 ----------- */

const dataOf = [
  {
    label: "开",
    value: "1",
  },
  {
    label: "关",
    value: "2",
  },
];

const store = useStore();
const formData = reactive(store.getters.printModule || {});
console.log(" == formData >>:", formData);
const refSettingPopup = ref();
const popupSettingConfirm = (data) => {
  console.log(" == popupSettingConfirm formData >>:", formData);
  store.commit("print/setPrintModule", { ...formData });
};
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
  .list-items {
    background-color: #ffffff;
    .border-b {
      border-bottom: #efefef 1px solid;
    }
  }

  .items-body {
    padding: 15rpx;
    display: flex;
    flex-direction: row;
  }

  .list-group {
    margin: 20rpx 10px;
    border-radius: 10px;
    overflow: hidden;
  }
}

.radio-list-item {
  display: flex;
  padding: 15rpx;
  background-color: #f5f5f5;
  width: 200rpx;
  justify-content: space-between;
  margin: 5rpx;
  border-radius: 3rpx;

  ::v-deep .u-radio,
  .u-checkbox-label--left {
    margin-right: 10rpx;
  }
}
</style>
